{% extends "base.html" %}
{% block head %}
	    <link rel="stylesheet" type="text/css" href="/static/css/music.css" />
	    
		<script type="text/javascript">

		$(document).ready(function(){

		    new jPlayerPlaylist({
		        jPlayer: "#jquery_jplayer_1",
		        cssSelectorAncestor: "#jp_container_1"
		    }, [
					{% for song in songs %}
					{title:"{{song.song}}",
					mp3:"/static/music/{{song.letter}}/{{song.album.folder}}/{{song.song}}"},
	        	    {% endfor %}
		    ], {
		        swfPath: "../js",
		        supplied: "mp3"
		    });
		});
				
	    </script>
	    
{% endblock %}
{% block content %}
	
	<div id="page_header"> {{album.album}} by {{album.artist.artist}}</div>
	<div id="album">
		{% for song in songs %}
			{{ song.song }}<br />
		{% endfor %}
	</div>
	<div id="jquery_jplayer_1" class="jp-jplayer" style="width: 0px; height: 0px; ">
		<img id="jp_poster_0" style="width: 0px; height: 0px; display: none; ">
	</div>
	<div id="jp_container_1" class="jp-audio">
			<div class="jp-type-playlist">
				<div class="jp-gui jp-interface">
					<ul class="jp-controls">
						<li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
						<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
						<li><a href="javascript:;" class="jp-pause" tabindex="1" style="display: none; ">pause</a></li>
						<li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
						<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
						<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
						<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute" style="display: none; ">unmute</a></li>
						<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
					</ul>
					<div class="jp-progress">
						<div class="jp-seek-bar" style="width: 100%; ">
							<div class="jp-play-bar" style="width: 0%; "></div>
						</div>
					</div>
					<div class="jp-volume-bar">
						<div class="jp-volume-bar-value" style="width: 80%; "></div>
					</div>
					<div class="jp-time-holder">
						<div class="jp-current-time">00:00</div>
						<div class="jp-duration">04:27</div>
					</div>
					<ul class="jp-toggles">
						<li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
						<li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off" style="display: none; ">shuffle off</a></li>
						<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
						<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off" style="display: none; ">repeat off</a></li>
					</ul>
				</div>
			</div>
		</div>
{% endblock %}